<template>
	<div>
		<div v-if="original">
		<div class="graybg"></div>
		<!--头部-->
		<header id="header">
			<div class="header header_bg clearfix" style="background: #FAAF18;">
				<div class="header_left pull-left">
					<i class="iconfont baiColor" onclick="javascript:history.back(-1)">&#xe612;</i>
				</div>
				<div class="header_center baiColor">余额转账</div>
				<div class="header_right">
					<router-link to="/alldetail/5">
					<em class="baiColor">转账记录</em>
					</router-link>
				</div>
			</div>
		</header>
		<div class="main _width">
			<div class="gathering marginAuto">
				<div class="gathering-each _width">
					<span>收款账号:</span>
					<input type="text"  placeholder="输入对方 ID" maxlength="20" v-model="gathering"/>
					<span></span>
				</div>
				<div class="gathering-each _width">
					<span>转账金额:</span>
					<input type="number"  @change="gatheringMoney" placeholder="转账金额不少于100.00" v-model="gatheringmoney"/>
				</div>
			</div>
			<div class="balance _width">
				<span>您的账号余额是<i v-text="balance"></i>,最多可转<i v-text="out"></i></span>
			</div>
			<div class="gathering marginAuto">
				<div class="gathering-each _width">
					<span>您需要支付:</span>
					<span v-text="pay"></span>
				</div>
				<div class="gathering-each _width">
					<span>实际到账:</span>
					<span v-text="account"></span>
				</div>
			</div>
			<div class="balance _width">
				<span>转账手续费<i>{{charge}}%</i></span>
			</div>
		</div>
		<div class="footer-button button baiColor" @click="footerbutton">
			<span>向对方转账</span>
		</div>
		</div>
		<!--余额转账传给组件-->
		<newpaypass v-if="original == true ? false:true" :remainingSum = "remainingSum"></newpaypass>
	</div>
</template>

<script>
	import newpaypass from './wbalancepass.vue';	//活积分转活积分传给组件
	
	export default{
		components:{newpaypass},
		data(){
			return{
				original:true,//控制显示隐藏
				gathering:"",//收款账号
				gatheringmoney:"",//转账金额
				balance:"",//余额
				out:"",	//转出
				pay:"",	//需要支付的钱数
				account:"",//实际到账的钱数
				charge:"", //手续费
				rate:"",	//费率
				remainingSum:{}
			}
		},
		mounted(){
			let _this = this;
			var info = window.localStorage.data;
			var params = new URLSearchParams();
			params.append('token', info);
			
			this.$axios({
			   url:"Home/Money/money_ye_zhuang",
				method:"post",
				data:params
			}).then(function(res){
				var datas = res.data.data;
			 	for(var i in datas){
			   		if(datas[i].c_key == "money_zhuan"){	//活积分转账费率
			   			_this.rate = datas[i].c_val/100;
			   			_this.charge  = datas[i].c_val;
			   		}
			  };
			 	let all = datas.u_money;
				_this.balance = all;	//总金额
				_this.out =parseFloat(all-all*_this.rate).toFixed(2);	//可转
			}).catch(function(err){
				console.log(err)		
			})
			
		},
		methods:{
			//获取页面中相关的数据
			gatheringMoney(){
				var _this = this;
				var gatheringmoney = this.gatheringmoney;
				if(gatheringmoney <= 99){
					alert("转账金额不少于100元")
				}else if(gatheringmoney>_this.out){
					alert("转账金额不得大于最大转账金额");
				}else{
					_this.account = gatheringmoney;	//实际到账
					_this.pay = parseFloat(gatheringmoney*1+gatheringmoney*_this.rate).toFixed(2);
					_this.charge = _this.rate;
				}
			},
			
			//点击想对方转账
			footerbutton(){
				var _this = this;
				var gatheringmoney = this.gatheringmoney;	//金额
				var gathering =  this.gathering;	//收款账号
				if(gatheringmoney == "" || gathering == ""){
					alert("请将信息填写完整");
				}else if(gatheringmoney>_this.out){
					alert("转账金额不得大于最大转账金额");
				}else{
					_this.remainingSum = {
						s_user_id:gathering,
						price:gatheringmoney,
						type:2,
						transferType:"yz"
					}
					_this.original = false;
					
//					var params = new URLSearchParams();
//					params.append('token', info);	//客户秘钥（信息）
//					params.append('s_user_id',gathering);
//					params.append('price',gatheringmoney);
//					params.append('type',2);
//					this.$axios({
//					   url:"Home/Money/money_zhuan",
//						method:"post",
//						data:params
//					  }).then(function(res){
//						if(res.data.code == 1){
//							alert("转账成功")
//							var order = res.data.data;
//						}else if(res.data.code == 0){
//							alert("转账失败")
//						}else if(res.data.code == 3){
//							alert("缺少参数")
//						}else if(res.data.code == 4){
//							alert("余额不足")
//						}else if(res.data.code == 4){
//							alert("收款用户不存在")
//						}
//					}).catch(function(err){
//						console.log(err)		
//					})
				}
			}
			
		}
	}
</script>

<style scope>
	@import "../css/public.css";
	@import "../css/wfreeze.css";
	.main{
		padding-top: 50px;
	}
</style>